<template>
	<!-- 外层容器 -->
	<el-container>
		<!-- 左侧导航栏 -->
		<el-aside width="200px">
			<el-menu default-active="home" class="el-menu-vertical-demo" style="border-right: none;"
				background-color="#545c64" router text-color="#50fbfb" unique-opened active-text-color="#ffd04b">
				<el-menu-item index="home">
					<i class="el-icon-s-home"></i>
					<span slot="title">网站首页</span>
				</el-menu-item>
				<el-menu-item index="community">
					<i class="el-icon-s-check"></i>
					<span slot="title">小区管理</span>
				</el-menu-item>
				<el-submenu index="">
					<template slot="title">
						<i class="el-icon-menu"></i>
						<span>帮买取快递废品回收</span>
					</template>
					<el-menu-item-group>
						<el-menu-item index="store"><i class="el-icon-house"></i>门店管理</el-menu-item>
						<el-menu-item index="courierStation"><i class="el-icon-house"></i>驿站管理</el-menu-item>
						<el-menu-item index="commodity"><i class="el-icon-house"></i>商品管理</el-menu-item>
						<el-menu-item index="2-4"><i class="el-icon-house"></i>订单管理</el-menu-item>
						<el-menu-item index="2-5"><i class="el-icon-house"></i>废品回收订单</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
				<el-submenu index="3">
					<template slot="title">
						<i class="el-icon-menu"></i>
						<span>胖虎甄选</span>
					</template>
					<el-menu-item-group>
						<el-menu-item index="2-1"><i class="el-icon-house"></i>商品管理</el-menu-item>
						<el-menu-item index="2-2"><i class="el-icon-house"></i>订单管理</el-menu-item>
						<el-menu-item index="2-3"><i class="el-icon-house"></i>售后订单</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
				<el-submenu index="4">
					<template slot="title">
						<i class="el-icon-menu"></i>
						<span>胖虎家政</span>
					</template>
					<el-menu-item-group>
						<el-menu-item index="2-1"><i class="el-icon-house"></i>家政服务</el-menu-item>
						<el-menu-item index="2-2"><i class="el-icon-house"></i>订单管理</el-menu-item>
						<el-menu-item index="2-3"><i class="el-icon-house"></i>售后订单</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
				<el-menu-item index="community">
					<i class="el-icon-s-check"></i>
					<span slot="title">用户管理</span>
				</el-menu-item>
				<el-menu-item index="community">
					<i class="el-icon-s-check"></i>
					<span slot="title">骑手管理</span>
				</el-menu-item>
				<el-menu-item index="community">
					<i class="el-icon-s-check"></i>
					<span slot="title">家政管理</span>
				</el-menu-item>
				<el-menu-item index="community">
					<i class="el-icon-s-check"></i>
					<span slot="title">新用户红包</span>
				</el-menu-item>
				<el-menu-item index="community">
					<i class="el-icon-s-check"></i>
					<span slot="title">类目管理</span>
				</el-menu-item>
			</el-menu>
		</el-aside>
		<el-container>
			<!-- 右侧的头部 -->
			<el-header>Header</el-header>
			<!-- 右侧的主体内容 -->
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	export default {
		methods: {
			loginout() {
				this.$message.success('退出成功！')
				this.$router.push('/')
			}
		}
	}
</script>

<style>
	.el-container {
		height: 100vh;
	}

	.el-aside {
		/* !important:设置优先级 */
		width: 210px !important;
		background-color: #304156;
		height: 100%;
	}

	.el-menu {
		height: 100%;
	}

	.el-header {
		height: 60px;
		box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
	}
</style>